<template>
	<div class="page flex">
		<div class="tarFlex flex">
			<div class="item active">🎵 全部</div>
			<div class="item">🏃 创作中</div>
			<div class="item">👌 已完成</div>
			<div class="item">😭 失败</div>
		</div>
		<div class="musicFlex flex">
			<div class="musicItem flex" v-for="(item, index) in 3">
				<div class="cardImage">
					<div class="one"></div>
					<div class="two"></div>
					<div class="three"></div>
				</div>
				<div class="cover flex">
					<Loading v-if="index === 0"></Loading>
					<img src="https://api.sora13.com/images/aisora-c/120083/20240610/7d1a4341b592463f85365c7aecba38a4_0.jpg" v-if="index === 1" />
					<img src="/img/imgError.png" v-if="index === 2" />
				</div>
				<div class="info">
					<template v-if="index === 0">
						<div class="h3 ell">创作中..</div>
						<div class="desc ell">大约1分钟以内</div>
					</template>
					<template v-if="index === 1">
						<div class="h3 ell">如果爱忘了(Live)</div>
						<div class="desc ell">写给我女朋友小何的一首生日快乐歌</div>
					</template>
					<template v-if="index === 2">
						<div class="h3 ell">创作失败</div>
						<div class="desc ell">歌词中含有敏感词</div>
					</template>
				</div>
				<div class="btn iconfont icon-bofang2"></div>
			</div>
		</div>
		<div class="pageView">
			<el-pagination
				:total="50"
				layout="total, prev, pager, next, jumper"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		layout: 'index',
		head() {
			return {
				title: "我的创作记录 - AI音乐生成 | Suno AI音乐 | 专业生成音乐 创作平台",
				meta: [
					{
						name: 'description',
						content: 'AI音乐生成 - Suno AI音乐 | 专业生成音乐 创作平台'
					}
				]
			}
		},
		data() {
			return {
				
			}
		},
		asyncData({ app }) {
			
		},
		mounted(){
			
		},
	}
</script>

<style lang="scss" scoped>
	.page{
		flex-direction: column;
		padding-bottom: 10px;
		.tarFlex{
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: -5px;
			.item{
				border-radius: 7px;
				margin-right: 13px;
				margin-bottom: 13px;
				font-size: 14px;
				color: rgba(224,245,255,.6);
				line-height: 33px;
				padding: 0 18px;
				background: rgba(204,221,255,.06);
				// border: 0.5px solid rgba(184,221,255,.12);
				transition: 0.2s all;
				cursor: pointer;
				&:hover{
					opacity: 0.8;
				}
				&.active{
					background: rgba(204,221,255,.18);
					color: #ddeaff;
				}
			}
		}
		.musicFlex{
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 5px;
			.musicItem{
				padding: 20px 20px;
				width: calc((100% - 15px * 2) / 3);
				margin-right: 15px;
				margin-bottom: 15px;
				// border: 0.5px solid rgba(171, 215, 255, .15);
				border-radius: 16px;
				position: relative;
				overflow: hidden;
				flex-direction: row;
				align-items: center;
				.cardImage{
					height: 100%;
					left: 0;
					padding: 1px;
					position: absolute;
					top: 0;
					width: 100%;
					.one{
						background: #506797;
						border-radius: 160.267px;
						filter: blur(120px);
						height: 244.407px;
						left: -122.5px;
						opacity: .15;
						position: absolute;
						top: -133.704px;
						width: 480px;
					}
					.two{
						border-radius: 200px;
						filter: blur(150px);
						opacity: .4;
						position: absolute;
						background: rgba(80, 103, 151, .4);
						bottom: -235.648px;
						height: 311.987px;
						right: -152.292px;
						transform: rotate(19.877deg);
						width: 311.987px;
					}
					.three{
						background: #506797;
						bottom: -83px;
						height: 160px;
						right: 277px;
						width: 262px;
						border-radius: 200px;
						filter: blur(150px);
						opacity: .2;
						position: absolute;
					}
				}
				.cover{
					position: relative;
					z-index: 2;
					width: 90px;
					height: 90px;
					border-radius: 7px;
					overflow: hidden;
					cursor: pointer;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					background: rgba(255,255,255,0.02);
					img{
						width: 100%;
						height: 100%;
						border-radius: 7px;
						transition: 0.2s all;
						&:hover{
							transform: scale(1.05);
						}
					}
				}
				.info{
					position: relative;
					z-index: 2;
					flex: 1;
					width: 0;
					margin-left: 15px;
					.h3{
						color: #ebf8ff;
						font-size: 17px;
						font-weight: bold;
						line-height: 20px;
						cursor: pointer;
						transition: 0.2s all;
						&:hover{
							opacity: 0.8;
						}
					}
					.desc{
						color: rgba(224, 245, 255, 0.6);
						font-size: 14px;
						line-height: 20px;
						margin-top: 9px;
						cursor: pointer;
						transition: 0.2s all;
						&:hover{
							opacity: 0.8;
						}
					}
				}
				.btn{
					position: relative;
					z-index: 2;
					color: rgba(235,248,255,0.7);
					margin-left: 15px;
					line-height: 40px;
					width: 40px;
					text-align: center;
					font-size: 18px;
					background: rgba(255,255,255,0.04);
					border-radius: 100px;
					padding-left: 2px;
					cursor: pointer;
					transition: 0.2s all;
					&:hover{
						transform: scale(1.05);
						opacity: 0.8;
					}
				}
				@media screen and (min-width: 1921px) {
					width: calc((100% - 15px * 3) / 4);
					&:nth-child(4n){
						margin-right: 0;
					}
				}
				@media screen and (max-width: 1920px) {
					width: calc((100% - 15px * 2) / 3);
					&:nth-child(3n){
						margin-right: 0;
					}
				}
			}
		}
		.pageView{
			padding-bottom: 15px;
		}
	}
</style>